<%--
  Created by IntelliJ IDEA.
  User: 13083
  Date: 2019/6/27
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>个人中心</title>

    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/animate.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/theme1.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/product.css"/>

    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/gerenzhongxin.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/head.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/footer.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/suercenter.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <%--<script src="js/test.js"></script>--%>
</head>

<body>

<div class="page-loader"></div>

<div class="wrapper">

    <!--Use class "navbar-fixed" or "navbar-default" -->
    <!--If you use "navbar-fixed" it will be sticky menu on scroll (only for large screens)-->

    <!-- ======================== Navigation ======================== -->

    <!-- ======================== Navigation ======================== -->

    <nav class="navbar-fixed">

        <div class="container">

            <!-- ==========  Top navigation ========== -->

            <div class="navigation navigation-top clearfix">
                <ul>
                    <!--add active class for current page-->

                    <!--Language selector-->

                    <li class="nav-settings">
                        <a href="javascript:void(0);" class="nav-settings-value"> 简体中文</a>
                        <ul class="nav-settings-list">
                            <li>简体中文</li>
                            <li>ENG</li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0);" class="open-login"><i class="icon icon-user"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-search"><i class="icon icon-magnifier"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-cart" onclick="show()"><i class="icon icon-cart"></i> <span id="pnum"></span></a></li>
                </ul>
            </div> <!--/navigation-top-->

            <!-- ==========  Main navigation ========== -->

            <div class="navigation navigation-main">

                <!-- Setup your logo here-->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot" class="logo"><img src="${pageContext.request.contextPath}/assets/images/logo.png" alt="" /></a>

                <!-- Mobile toggle menu -->

                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

                <!-- Convertible menu (mobile/desktop)-->

                <div class="floating-menu">

                    <!-- Mobile toggle menu trigger-->

                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>

                    <ul>
                        <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot">首页</a></li>
                        <%--  <li><a href="product.jsp">产品详情</a></li>--%>
                        <li><a href="products-grid.jsp">产品列表</a></li>
                    </ul>
                </div> <!--/floating-menu-->
            </div> <!--/navigation-main-->

            <!-- ==========  Search wrapper ========== -->

            <div class="search-wrapper">

                <!-- Search form -->
                <input class="form-control" placeholder="Search..." />
                <button class="btn btn-main btn-search">Go!</button>

                <!-- Search results - live search -->
                <div class="search-results">
                    <div class="search-result-items">
                        <div class="title h4">Products <a href="#" class="btn btn-clean-dark btn-xs">View all</a></div>
                        <ul>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Green corner</span> <span class="category">Sofa</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Laura</span> <span class="category">Armchairs</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Nude</span> <span class="category">Dining tables</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Aurora</span> <span class="category">Nightstands</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Dining set</span> <span class="category">Kitchen</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Seat chair</span> <span class="category">Bar sets</span></a></li>
                        </ul>
                    </div> <!--/search-result-items-->
                    <!--/search-result-items-->
                </div> <!--/search-results-->
            </div>

            <!-- ==========  Login wrapper ========== -->
            <%@ include file="login_part.jsp" %>
            <!-- ==========  Cart wrapper ========== -->
            <!-- ==========  购物车========== -->
            <%--这里取走了购物车--%>
            <%--这里可能需要问老师--%>
            <%@ include file="shopcar.jsp" %>

        </div> <!--/container-->
    </nav>

    <!-- ========================  Main header ======================== -->

    <section class="main-header" id="header00" style="background-image:url(${pageContext.request.contextPath}/assets/images/gallery-2.jpg)">

        <header>
            <div class="container" style="width: 1200px">
                <h1 class="h2 title" id="h22" style="text-align: center;" >个人中心</h1>
                <ol class="breadcrumb breadcrumb-inverted">  </ol>
            </div>
        </header>

        <div class="container" style="width: 1100px">
            <div class="row product-flex">
                <div class="col-md-4 col-sm-12 product-flex-info" id="cm4">
                    <div class="clearfix" >
                        <div class="userWrap" >
                            <div class="ur_left">

                                <div class="ur_slide">
                                    <a href=""><h2 class="slide_h2"><b></b>我的个人中心</h2></a>
                                    <ul class="slide_list">
                                        <li class="no">
                                            <a>
                                            <button type="button" id="gr" style="border: none;background: none;outline: none">个人资料</button></a>
                                        </li>
                                        <li>
                                            <a id="dd" href="${pageContext.request.contextPath}/OrderServlet?method=ShowOrder" target="iframe_a" >
                                             <%--   <button type="button" id="dd" style="border: none;background: none;outline: none">我的订单</button>--%>
                                                我的订单
                                           </a>
                                        </li>
                                        <li>
                                            <a id="dz" href="${pageContext.request.contextPath}/AddressServlet?method=show" target="iframe">地址管理</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ur_right ClearFix" id="content-person" style="background-color: white;">
                                <!--uer_top-->
                                <div class="ur_location" style="margin-left: 5%;width: 800px;margin-right: 5%">
                                    <a href="">我的个人中心</a>
                                    <span>&gt;</span>
                                    <a class="a_cur">个人资料</a>
                                </div>
                                <!--uer_top-->
                                <div class="base_info" style="margin-left: 5%;width: 800px;margin-right: 5%;margin-bottom: 2%">
                                    <div class="info_top">
                                        <div class="bi_l">
                                            <div class="m_img">
                                                <div class="hg_box">
                                                    <img src="${pageContext.request.contextPath}/assets/images/hg_img_0.png">
                                                </div>
                                                <img src="${pageContext.request.contextPath}/assets/images/user_center_img4.jpg">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="grxx" style="display: none">
                                    <input type="hidden"value="${name}" id="test1" >
                                        <div class="base_item">
                                            <span class="label_name1"><span>*</span>用户名：</span>
                                            <span class="label_name2" id="yonghu"></span><br />
                                        </div>
                                        <div class="base_item">
                                            <span class="label_name1"><span>*</span>手机号：</span>
                                            <span class="label_name2" id="shoujihao"></span><br />
                                        </div>

                                        <div class="base_item">
                                            <span class="label_name1"><span>*</span>邮箱：</span>
                                            <span class="label_name2" id="youxiang"></span><br />
                                        </div>
                                        <div class=" base_btn" style="">
                                            <button class="base_btn_save" id="profilesubmit" style="background-color: #B1191A; color: black;border:1px solid #000;width: 150px;height: 40px" type="button">修改信息</button>
                                        </div>
                                    </div>
                                    <div id="xggrxx" style="display: none">
                                        <form action="${pageContext.request.contextPath }/UserServlet" method="post" id="form_xgzl">
                                            <input type="hidden" name="method"  value="modify"/>
                                            <ul style="margin-left: 200px;margin-top: 20px">
                                                <li style="display:inline-block;width:200px;text-align:left;">
                                                    <div class="row form-group" style="width: 400px">
                                                        <div class="col-md-12">
                                                            <label for="yx">邮箱</label> <span class='red' id="yxspan"></span><br />
                                                            <input type="email" id="yx" class="form-control" name="email" value="" placeholder="邮箱"  tabindex="5" maxlength="20">
                                                        </div>
                                                    </div>
                                                </li>
                                                <br>
                                                <li style="display:inline-block;width:200px;text-align:left;">
                                                    <div class="row form-group" style="width: 400px">
                                                        <div class="col-md-12">
                                                            <label for="sj">电话</label><span class='red' id="sjhaospan"></span><br />
                                                            <input type="phone" id="sj" class="form-control" name="phone" value=""  placeholder="电话号码" autocomplete="off" tabindex="1" maxlength="11">
                                                        </div>
                                                    </div>
                                                </li>
                                                <br>
                                                <li style="display: inline-block;width:200px">
                                                    <div class="row form-group" id="xgzl" >
                                                        <div class="col-md-12"  id="xgzl-1" >
                                                            <input id="xiugaizl" type="button" class="btn btn-primary" value="修改" style="width: 90px;margin-left: -10px">
                                                        </div>
                                                        <div class="col-md-12"  id="xgzl-2">
                                                            <input type="button" id="quxiaoxg" class="btn btn-primary" value="取消" style="margin-left:-10px;width: 90px">
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </form>
                                    </div>
                                </div>
                            </div>
                           <div class="ur_right" id="content-dizhi" style="display: none;width: 100%;height: auto">
                               <div class="ur_location" style="margin-left: 5%;margin-right: 5%;width: 800px">
                                   <a href="">我的个人中心</a>
                                   <span>&gt;</span>
                                   <a class="a_cur">地址管理</a>
                               </div>

                               <div class="xianyou" id="xianyou" style="">
                                   <iframe src="${pageContext.request.contextPath }/html/geren1.jsp" name="iframe" frameborder="0" style="width: 100%; height: 95%; "></iframe>

                               </div>

                           </div>
                            <div id="content-dingdan" class="ur_right" style="display: none;background-color: white;width:800px;">
                                <div class="ur_location" style="margin-left: 5%;margin-right: 5%;width: 800px">
                                    <a href="">我的个人中心</a>
                                    <span>&gt;</span>
                                    <a class="a_cur">我的订单</a>
                                </div>
                                <div class="ur_r_list" style="margin-left: 5%;width: 800px;margin-right: 5%;margin-bottom: 1%" >
                                    <div class="ur_list_tab" style="width: 800px;margin-right: 5%">
                                        <ul class="ur_tab_ul" >
                                            <li class="on" >
                                                <a href="${pageContext.request.contextPath}/OrderServlet?method=ShowOrder" target="iframe_a"  >全部订单</a>
                                            </li>
                                            <li class="on" >
                                                <a href="${pageContext.request.contextPath}/OrderServlet?method=unfinish" target="iframe_a" >待付款</a>
                                            </li>
                                            <li class="on" >
                                                <a href="${pageContext.request.contextPath}/OrderServlet?method=finish" target="iframe_a" >历史订单</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <iframe src="${pageContext.request.contextPath}/html/dingdan.jsp" name="iframe_a" frameborder="0" style="width: 100%; height: 80%; "></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ================== 页脚 ================== -->

    <%@ include file="foot.jsp" %>

<!--/wrapper-->

    <script>

    </script>
<!--JS files-->
    <script>
        $(function () {
            $('#gr').click(function () {
                $('#grxx').css('display','');
                $('#xggrxx').css('display','none');
            })
            $('#profilesubmit').click(function () {
                $('#grxx').css('display','none');
                $('#xggrxx').css('display','');
            })
            $('#quxiaoxg').click(function () {
                $('#grxx').css('display','');
                $('#xggrxx').css('display','none');
            })


        })
    </script>

<script type="text/javascript">
    var path = '${pageContext.request.contextPath }';
    $(function ()
    {
        $('#gr').click(function ()
    {
        //注意下一句就是向后台传递 method 与 参数 方法。
        $('#content-person').css('display','');
        $('#grxx').css('display','');
        $('#content-dingdan').css('display','none');
        document.getElementById("content-dizhi").style.display="none";

        $.get(path+'/UserServlet',{method:"getInfo",name:$('#test1').val()}, function (data)
        {
            $.each(data,function (i,n) //解析 Json 数组，这个数组里只有一个用户。
            {
                $('#yonghu').text(n.name);
                $('#xingbie').text(n.sex);
                $('#shoujihao').text(n.phone);
                $('#youxiang').text(n.mail);
                $('#yx').val(n.mail);
                $('#sj').val(n.phone);

            })
        },"json")
    })

        $('#dz').click(function ()
        {
            //注意下一句就是向后台传递 method 与 参数 方法。
            document.getElementById("content-person").style.display="none";
            document.getElementById("content-dingdan").style.display="none";
            document.getElementById("content-dizhi").style.display="";


        })
        $('#dd').click(function ()
        {
            //注意下一句就是向后台传递 method 与 参数 方法。
            document.getElementById("content-person").style.display="none";
            document.getElementById("content-dingdan").style.display="";
            document.getElementById("content-dizhi").style.display="none";


        })

        $('#gr').click();
    })

</script>
    <%--修改个人信息--%>
    <script>
        /*  $(function () {*/
        var path = '${pageContext.request.contextPath }';

        var validate={
            mail_form:false,
            dianhua_form:false,


        };
        function checkLength(str,min,max)
        {
            if(str.length < min || str.length > max)
            {
                return true;
            }else{
                return false;
                //$('#userspan').html('');
            }
        }
        function checkdianhua(){
            var dianhua = $('#sj').val();
            $.get(path+'/UserServlet',{method:"isHave",phone:dianhua}, function (data) {
                $.each(data,function (i,n) {
                    if(n.code==1)
                    {
                        $('#sjhaospan').html("该手机号码已存在");
                        $('#sjhaospan').css('color','red');
                        validate.dianhua_form = false;
                        return false;
                    }else
                    {
                        if(checkLength(dianhua,11,11)){
                            $('#sjhaospan').html('该手机号码不合法');
                            validate.dianhua_form = false;
                            $('#sjhaospan').css('color','red');
                            return false;
                        }else{
                            $('#sjhaospan').html(' √');
                            validate.dianhua_form = true;
                            $('#sjhaospan').css('color','green');
                            return true;
                        }
                    }

                })
            },"json")
        }

        /*验证邮箱是否合法*/
        function checkmail(){
            var mail = $('#yx').val();
            $.get(path+'/UserServlet',{method:"isHave",email:mail}, function (data) {
                $.each(data,function (i,n) {
                    if(n.code==1)
                    {
                        $('#yxspan').html("该邮箱已存在");
                        $('#yxspan').css('color','red');
                        validate.mail_form = false;
                        return false;
                    }else
                    {
                        if(checkLength(mail,3,16)){
                            $('#yxspan').html('该邮箱不合法');
                            validate.mail_form = false;
                            $('#yxspan').css('color','red');
                            return false;
                        }else{
                            $('#yxspan').html('  √');
                            validate.mail_form = true;
                            $('#yxspan').css('color','green');
                            return true;
                        }
                    }

                })
            },"json")
        }
        $('#sj').change(checkdianhua);
        $('#yx').change(checkmail);

        $('#xiugaizl').click(function () {
                var isok =  validate.dianhua_form && validate.mail_form;
                if (isok) {

                    $('#form_xgzl').submit();
                }else {
                    alert("Fail Regist!");
                    return false;
                }
            }
        )
        /*})*/
    </script>
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.owl.carousel.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.ion.rangeSlider.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.isotope.pkgd.js"></script>
<script src="${pageContext.request.contextPath }/js/main.js"></script>
</body>

</html>

